
import React, { useState } from "react";
import {
  Animated,
  Text,
  View
} from "react-native";
import ScrollView = Animated.ScrollView;
import { Button, Flex, WhiteSpace, WingBlank } from "@ant-design/react-native";
// @ts-ignore
import AntDesign from "react-native-vector-icons/AntDesign";

const PlaceHolder = (props: any) => (
  <View
    style={{
      backgroundColor: "#fff",
      height: 30,
      alignItems: "center",
      justifyContent: "center"
    }}
    {...props}>
    <Text style={{ color: "#bbb" }}>Block</Text>
  </View>
);

const App = () => {
  return (
    <View>
      {/*View - 基础组件*/}
      <View style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}>
        <View style={{ backgroundColor: "blue", flex: 0.3 }} />
        <View style={{ backgroundColor: "red", flex: 0.5 }} />
        <View><Text>Test Hello World Test</Text></View>
      </View>
      <Text>WingBlank - 两翼留白</Text>
      <View>
        <WhiteSpace />
        <WingBlank>
          <PlaceHolder />
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="md">
          <PlaceHolder />
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="sm">
          <PlaceHolder />
        </WingBlank>
      </View>
      <Text>WhiteSPace - 上下留白</Text>
      <View>
        <WhiteSpace size="xs" />
        <PlaceHolder />

        <WhiteSpace size="sm"/>
        <PlaceHolder/>

        <WhiteSpace size="md"/>
        <PlaceHolder/>

        <WhiteSpace size="lg"/>
        <PlaceHolder/>

        <WhiteSpace size="xl"/>
        <PlaceHolder/>
      </View>
    </View>
  );
};
export default App;

